<!-- 去旅行页面 最下面 主题推荐 -->
<template>
  <div class="box">
    <div :class="{'for-box2':box2 == index+1,'for-box3':box3 == index+1,'for-box4':box4 == index+1,'for-box5':box5 == index+1,'for-box':true}">
      <header class="scenic-header-box">
        <h2 class="scenic-title">
          <span>{{themeRecList.recTitle}}</span>
          <ul class="mouse-nav-list">
            <!-- :class="{'active':index2 == count && countId == item1.id }" -->
            <li
              class="mouse-nav-item"
              v-for="(items,i) in recNavList"
              :key="items.id"
              @mousemove="onTabs(i)"
              :class="{'active':i == count }"
            >{{items.navItem}}</li>
          </ul>
        </h2>
        <span class="change-btn">
          <span class="change-text" style="color:#ff9d00">查看更多></span>
        </span>
      </header>
      <ul class="scenic-list">
        <li>
          <a href="#">
            <img :src="themeRecList.recAd" width="154px" height="241px" />
          </a>
        </li>
        <li class="scenic-item" v-for="(item3,i) in recNavList[count].recList" :key="i">
          <a href="#" class="scenic-item-link">
            <img class="scenic-item-link-img" :src="item3.recImg" width="266px" height="148px" />
            <div class="inf-box">
              <p class="scenic-item-link-inf" :title="item3.recInf">{{item3.recInf}}</p>
              <div class="scenic-item-link-bot">
                <span style="color:#ff8a00;font-size:22px" class="scenic-item-link-money-box">
                  <b>￥{{item3.recPrice}}</b>
                  <span style="font-size:14px">起</span>
                </span>
                <span class="scenic-item-link-shop">店铺:{{item3.recShop}}</span>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import {mapState} from 'vuex'
export default {
  props: ["data", "index"],
  data() {
    return {
      themeRecList: this.data,
      recNavList: this.data.recNavList,
      count: 0,
      box2: 2,
      box3: 3,
      box4: 4,
      box5: 5
    };
  },

  components: {},
  methods: {
    onTabs(i) {
      this.count = i;
    }
  },
  mounted() {
    
  }
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
.for-box2 {
  .scenic-header-box {
    .scenic-title {
      color: #ffb80e !important;

      .mouse-nav-list {
        .active {
          background-color: #ffb80e !important;
        }
      }
    }
  }
}

.for-box3 {
  .scenic-header-box {
    .scenic-title {
      color: #786ee6 !important;

      .mouse-nav-list {
        .active {
          background-color: #786ee6 !important;
        }
      }
    }
  }
}

.for-box4 {
  .scenic-header-box {
    .scenic-title {
      color: #985eb4 !important;

      .mouse-nav-list {
        .active {
          background-color: #985eb4 !important;
        }
      }
    }
  }
}

.for-box5 {
  .scenic-header-box {
    .scenic-title {
      color: #2A79FB !important;

      .mouse-nav-list {
        .active {
          background-color: #2A79FB !important;
        }
      }
    }
  }
}

.box {
  width: 1000px;
  margin: 15px auto 60px;

  .scenic-header-box {
    border-bottom: 1px solid #f1f1f1;
    color: #999999;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 10px 0;
    margin-top: 60px;

    .scenic-title {
      color: scenic-title;
      font-weight: normal;
      font-size: 24px;
      color: #45bd9e;
      display: flex;
      align-items: center;

      .mouse-nav-list {
        display: flex;
        font-size: 16px;
        margin-left: 75px;

        .mouse-nav-item {
          padding: 5px;
          border-radius: 4px;
          margin: 0 5px;
          cursor: pointer;
          color: #333333;
        }

        .active {
          color: #ffffff;
          background-color: #45bd9e;
        }
      }
    }

    .change-btn {
      font-size: 12px;
      display: flex;
      align-items: center;

      &:hover {
        cursor: pointer;

        .change-text {
          text-decoration: underline;
        }
      }
    }
  }

  .scenic-list {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .scenic-item {
      display: flex;

      .scenic-item-link {
        width: 266px;

        .inf-box {
          font-size: 14px;
          border: 1px solid #efefef;
          margin-top: -5px;

          &:hover {
            background-color: #efefef;

            .scenic-item-link-inf {
              height: 80px;
              margin-top: -42px;
              transition: all 0.3s;
              z-index: 10;
              position: relative;
              background-color: #efefef;
            }
          }

          .scenic-item-link-inf {
            height: 38px;
            overflow: hidden;
            padding: 5px 10px 0 10px;
            z-index: 10;
            position: relative;
            transition: all 0.3s;
            background-color: #f6f6f6;
          }

          .scenic-item-link-bot {
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .scenic-item-link-shop {
              font-size: 12px;
              color: #666666;
            }
          }
        }
      }
    }
  }
}
</style>